/**
 * Copyright 2013 Google, Inc. All Rights Reserved.
 *
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/**
 * A container for the toolbar for navigating within a step for graphics replay.
 *
 * @author chizeng@google.com (Chi Zeng)
 */

{namespace wtf.replay.graphics.ui.eventNavigatorToolbar}

/**
 * Container of control buttons for navigating within a step.
 */
{template .controller}
  <div class="{css graphicsReplayEventNavigatorToolbar}">
    <table cellspacing="0">
      <tr>
        <td class="{css leftButtons}">
          <div class="{css kButtonBar} {css kButtonBarSmall}">
            <a class="{css kButton} {css kMenuButton} {css kButtonLeft} {css kDisabled} {css firstCallButton}" title="Reset to the first call (ctrl+shift+&#8593;)">
              <img alt="Seek to first call" src="icons/seek_to_top.svg">
            </a>
            <a class="{css kButton} {css kMenuButton} {css kButtonMid} {css kDisabled} {css previousDrawCallButton}" title="Previous draw call (ctrl+&#8593;)">
              <img alt="Previous draw call" src="icons/skip_up.svg">
            </a>
            <a class="{css kButton} {css kMenuButton} {css kButtonMid} {css kDisabled} {css nextDrawCallButton}" title="Next draw call (ctrl+&#8595;)">
              <img alt="Next draw call" src="icons/skip_down.svg">
            </a>
            <a class="{css kButton} {css kMenuButton} {css kButtonRight} {css kDisabled} {css lastCallButton}" title="Run to the last call (ctrl+shift+&#8595;)">
              <img alt="Seek to last call" src="icons/seek_to_bottom.svg">
            </a>
            <a class="{css kButton} {css kMenuButton} {css kDisabled} {css toggleOverdrawButton}" title="Toggle overdraw (v)">
              Overdraw
            </a>
          </div>
        </td>
        <td class="{css center}">
          <div class="{css searchBox}"></div>
        </td>
        <td class="{css rightButtons}">
          <div class="{css kButtonBar} {css kButtonBarSmall}">
            <a class="{css kButton} {css kMenuButton} {css optionsButton}" title="Change display and filter options.">
                <img alt="Filter" src="icons/autofilter_filled.svg">
                <span class="{css kButtonDisclosure}"></span>
              </a>
          </div>
        </td>
      </tr>
    </table>
  </div>
{/template}
